import React, { useMemo } from 'react'
import { COLUMNS } from "./columns"
import MOCK_DATA from "./MOCK_DATA.json"
import { useTable, useRowSelect } from 'react-table'
import Checkbox from './Checkbox'
import "./table.css"
const RowSelection = () => {
    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => MOCK_DATA, [])
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        footerGroups,
        rows,
        prepareRow,
        selectedFlatRows
    } = useTable(
        {
            columns,
            data,
        },
        useRowSelect,
        hooks => {
            // 在初始化表格实例对象时调用
            // hooks: 对象, 钩子函数集合
            // 以编程方式向表格中添加列
            hooks.visibleColumns.push(columns => {
                // columns 现有的列数据
                return [
                    {
                        id: "selection",
                        Header: ({ getToggleAllRowsSelectedProps }) => (
                            // 实现全选功能
                            <Checkbox {...getToggleAllRowsSelectedProps()} />
                        ),
                        // 实现单选功能
                        Cell: ({ row }) => <Checkbox {...row.getToggleRowSelectedProps()} />
                    },
                    ...columns
                ]
            })
        }
    )
    // 只显示前 10 条数据
    const firstPageRows = rows.slice(0, 10)

    return (
        <>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map(item => (
                                    <th {...item.getHeaderProps()}>{item.render("Header")}</th>
                                ))
                            }

                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        rows.map(row => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render("Cell")}</td>)
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
                <tfoot>
                    {footerGroups.map(footGroup => (
                        <tr {...footGroup.getFooterGroupProps()}>
                            {footGroup.headers.map(column => (
                                <td {...column.getFooterProps()}>{column.render("Footer")}</td>
                            ))}
                        </tr>
                    ))}
                </tfoot>
            </table >
            <div>
                {JSON.stringify(
                    { selectedRows: selectedFlatRows.map(row => row.original) },
                    null,
                    2
                )}
            </div>
        </>
    )
}

export default RowSelection